<template lang="pug">
	div
		.media(v-for="i in items")
			.media-left
				img.media-object(:src="'https://qiniu443.alltennis.cn/'+i.thumb")
			.media-body
				h5
					router-link(
						:to="{name: 'news', params: { id: i.id }}"
					) {{ i.title }}
				p {{ i.intro }}
				p.small
					span.glyphicon.glyphicon-user
					| &nbsp;
					| {{ i.author }} / {{ i.timeCreate | time }}
				p.small
					span.glyphicon.glyphicon-eye-open
					| &nbsp;
					| {{ i.count.views }}
			hr

		ul(v-if="items.length" class="pagination")
			li(v-for="i in pageLinks" v-bind:class="{ active: i==page }")
				router-link(
					:to="{name: 'index', query: { p: i }}"
					exact
				) {{ i }}


</template>
<style scoped>
	.media-object{
		width: 100px;
	}
	.media-body>h5{
		margin-top: 0px;
		font-size : 24px;
	}
	.small{
		text-align: right;
	}
</style>
<script>
	const toNumber = require('lodash.tonumber')

	const preFetch = function (route, store) {
		route  = route || this.$route
		store  = store || this.$store

		return store.dispatch('getNewsList', route.query.p || 1)
	}

	module.exports = {
		computed: {
			items () {
				return this.$store.state.newsList
			},
			page () {
				return toNumber(this.$route.query.p) || 1
			},
			pageLinks () {
				return [this.page-2, this.page-1, this.page, this.page+1, this.page+2].filter(x => x>0)
			}
		},
		preFetch: preFetch,
		mounted: function () {
			preFetch.call(this)
			document.title ="全网球"
		},
		watch: {
			'$route.query.p': function (newV, oldV) {
				preFetch.call(this)
			}
		}
	}
</script>
